<script setup>
import { computed } from 'vue';
import { ZoomOutOutlined, ZoomInOutlined } from '@ant-design/icons-vue';
import { inputValueToInt } from '@/util/index.js';

const props = defineProps(['value', 'min', 'max']);
const emit = defineEmits(['change']);

const calcPct = computed(() => R.compose( R.dec, R.clamp(1, props.max), inputValueToInt  ));
</script>

<template>
  <div class="zoom">
    <a-button @click="() => emit('change', 'small')">
      <template #icon><zoom-out-outlined /></template>
    </a-button>
    <a-input-number
      title="若确认请按 Enter"
      :min="props.min"
      :max="props.max"
      :value="`${ Number.parseInt(props.value) }%`"
      :controls="false"
      size="small"
      @pressEnter="event => emit('change', calcPct(event))">
    </a-input-number>
    <a-button @click="() => emit('change', 'big')">
      <template #icon><zoom-in-outlined /></template>
    </a-button>
  </div>
</template>

<style>
.base-label .zoom {
  border: 1px solid #666;
  border-radius: 4px;
}

.base-label .zoom .value {
  display: inline-block;
  width: 2.5em;
  text-align: center;
}

.base-label .zoom .ant-btn {
  width: 24px;
  height: 24px;
  border-width: 0;
}

.base-label .zoom .ant-input-number { width: 36px; }
.base-label .zoom .ant-input-number input { padding: 0; }
</style>
